<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1300"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-button type="primary" color="#6074e8" @click="to_export">导出</el-button>
        <el-main class="printMain" ref="printMain">
            <div class="title">
                {{area_name}} {{contract_date[0]}} - {{contract_date[1]}} 销售汇总<!--  (总匹数: {{pieces}} 销售总额: {{amount}}) -->
            </div>
            <table border="1" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr style="height:32px;line-height: 32px;">
                        <th class="table_border" rowspan="2">销售日期</th>
                        <th class="table_border" rowspan="2">客户</th>
                        <th class="table_border" rowspan="2">匹数</th>
                        <th class="table_border" rowspan="2">金额</th>
                        <th class="table_border">
                            当月总匹数
                        </th>
                        <th class="table_border">
                            销售总额
                        </th>
                    </tr>
                    <tr style="height:32px;line-height: 32px;">
                        <th class="table_border">
                            {{pieces}}
                        </th>
                        <th class="table_border">
                            {{amount}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in detail" :key="index" style="height:32px;line-height: 32px;" :class="{ 'red-border-row': index === detail.length - 1 }">
                        <td class="table_border" :rowspan="item.rowspan" v-if="item.displayDate">{{item.sales_date}}</td>
                        <td class="table_border">{{item.customer}}</td>
                        <td class="table_border">{{item.pieces}}</td>
                        <td class="table_border">{{item.amount}}</td>
                        <td v-if="index === 0" :rowspan="detail.length" style="text-align: center; vertical-align: middle;">
                            {{pieces}}
                        </td>
                        <td v-if="index === 0" :rowspan="detail.length" style="text-align: center; vertical-align: middle;">
                            {{amount}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            detail: [],
            contract_date: "",
            amount: 0,
            pieces: 0,
            area_name: "",
		}
	},
	mounted() {
	},
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.contract_date = data
            var res = await this.$API.business.sale.saleTotalData.get({contract_date: data});
            // 获取原始数据
            const originalData = res.data.data;
            // 处理同日期的日期列合并
            if (originalData && originalData.length > 0) {
                // 先按照日期排序（确保同一日期的记录连续）
                const sortedData = [...originalData].sort((a, b) => a.sales_date.localeCompare(b.sales_date));
                // 初始化处理后的数据数组
                const processedData = [];
                // 按日期分组统计
                const dateGroups = {};
                sortedData.forEach(item => {
                    if (!dateGroups[item.sales_date]) {
                        dateGroups[item.sales_date] = 0;
                    }
                    dateGroups[item.sales_date]++;
                });
                // 遍历数据设置合并属性
                let currentDate = null;
                for (let i = 0; i < sortedData.length; i++) {
                    const item = { ...sortedData[i] };
                    // 检查是否是新日期的开始
                    if (item.sales_date !== currentDate) {
                        currentDate = item.sales_date;
                        // 从分组统计中获取该日期的总记录数
                        item.rowspan = dateGroups[currentDate];
                        item.displayDate = true;
                    } else {
                        // 同一日期的后续记录
                        item.rowspan = 1;
                        item.displayDate = false;
                    }
                    processedData.push(item);
                }
                
                this.detail = processedData;
            } else {
                this.detail = [];
            }
            this.amount = res.data.heji.amount;
            this.pieces = res.data.heji.pieces;
            this.area_name = res.data.heji.area_name;
        },
        async to_export(){
            var res = await this.$API.business.sale.saleTotal.get({contract_date: this.contract_date})
            if (res.code == 1) {
				this.$message.success("导出成功");
				window.location.href = res.data.url
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
        },
	}
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    margin: 10px;
}
.table_border{
    min-width: 120px;
}
td{
    text-align: center;
}
table{
    font-size: 12px !important;
    tbody{
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
}
</style>
